import React, { useState } from 'react';

export default function Shiyan() {
    const [showModal, setShowModal] = useState(false);

  const handleAppleLogin = () => {
    // Here you would implement actual Apple login logic
    console.log('Apple login initiated');
    setShowModal(false);
  };
  return (
    <div>
        <div>
      {/* Button to trigger the modal */}
      <button 
        onClick={() => setShowModal(true)}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '10px 20px',
          backgroundColor: '#000',
          color: 'white',
          border: 'none',
          borderRadius: '6px',
          cursor: 'pointer',
          fontSize: '16px'
        }}
      >
        <img 
          src="./iOS.png" 
          alt="Apple logo" 
          style={{ width: '20px', marginRight: '8px' }} 
        />
        通过Apple登录
      </button>

      {/* Modal overlay */}
      {showModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}>
          {/* Modal content */}
          <div style={{
            backgroundColor: 'white',
            borderRadius: '12px',
            width: '90%',
            maxWidth: '400px',
            padding: '20px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
          }}>
            <h2 style={{ textAlign: 'center', marginBottom: '5px' }}>应用名字</h2>
            <p style={{ textAlign: 'center', color: '#666', marginBottom: '20px' }}>slogan</p>
            
            <div style={{ 
              display: 'flex', 
              justifyContent: 'space-between',
              marginBottom: '20px',
              color: '#666'
            }}>
              <span>Apple ID</span>
              <span 
                style={{ color: '#007AFF', cursor: 'pointer' }}
                onClick={() => setShowModal(false)}
              >
                取消
              </span>
            </div>
            
            <h3 style={{ textAlign: 'center', marginBottom: '30px' }}>通过 Apple 登录</h3>
            
            <div style={{ marginBottom: '25px' }}>
              <div style={{ display: 'flex', marginBottom: '15px' }}>
                <div style={{ marginRight: '15px', fontSize: '24px' }}>✓</div>
                <div>
                  <h4 style={{ margin: '0 0 5px 0' }}>快速简单</h4>
                  <p style={{ margin: 0, color: '#666' }}>使用已有的 Apple ID 登录 App 和网站。</p>
                </div>
              </div>
              
              <div style={{ display: 'flex', marginBottom: '15px' }}>
                <div style={{ marginRight: '15px', fontSize: '24px' }}>✓</div>
                <div>
                  <h4 style={{ margin: '0 0 5px 0' }}>尊重您的隐私</h4>
                  <p style={{ margin: 0, color: '#666' }}>App 仅可请求姓名和电子邮件。Apple 绝不会追踪您。</p>
                </div>
              </div>
              
              <div style={{ display: 'flex' }}>
                <div style={{ marginRight: '15px', fontSize: '24px' }}>✓</div>
                <div>
                  <h4 style={{ margin: '0 0 5px 0' }}>隐藏电子邮件</h4>
                  <p style={{ margin: 0, color: '#666' }}>使您的电子邮件地址保密但仍接收来自 App 的邮件。</p>
                </div>
              </div>
            </div>
            
            <p style={{ 
              fontSize: '12px', 
              color: '#666', 
              marginBottom: '25px',
              lineHeight: '1.4'
            }}>
              设置"通过 Apple 登录"时，Apple 可能会使用有关您 Apple ID 和设备使用习惯的信息来帮助防止欺诈行为。
              <a href="#" style={{ color: '#007AFF', textDecoration: 'none' }}>了解数据的管理方式...</a>
            </p>
            
            <button
              onClick={handleAppleLogin}
              style={{
                width: '100%',
                padding: '12px',
                backgroundColor: '#000',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                fontSize: '16px',
                cursor: 'pointer'
              }}
            >
              继续
            </button>
          </div>
        </div>
      )}
    </div>
    </div>
  )
}
